iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1
Mobile Development

Android 十全大補系列 第 6

[Android 十全大補] User Interaction

  • 分享至 

  • xImage
  •  

我們不希望我們的 app 只是固定的畫面,所以我們必須要得到使用者的輸入然後做些動態改變。在 app 的世界裡,不外乎是點擊、滑動或是鍵盤的輸入或是其他感應器所得到的資料。那我們要怎麼拿到這些資訊呢?

Hollywood Principle

Don't call us, we'll call you.
大家可以想像有一天我們變成了好萊塢的導演,有成千上萬的人要來應徵各式各樣不同的角色,每個人每天又一直打給你問結果,你如果只有一支電話要怎麼處理這麼多人會打來問試鏡結果的需求呢?
買很多隻電話嗎?還是請很多個助理?

這些都是方法之一,但在這個例子裡,真正入選的人會遠比試鏡的人少很多,如果由導演主動通知入選,工作量是不是就會少很多?

透過反轉主被動的關係來優化架構,這就是著名的好萊塢原則,在 Android(或其他 GUI 程式)的世界裡這都是很常見的作法。因為在多工程式的世界裡,常會有多種等待使用者輸入的情境,而程式碼是一行一行的執行,我們不可能在某一行直接停下來等使用者的輸入而不繼續執行其他程式碼(除非你是做 command line tool 的開發)。這種技術不管你是稱作 callback或是 listener 大致上都是一樣的原理。我們就一起來看 Android 是怎麼實作 listener 的吧。

OnClickListener

首先回到我們的 MainActivity(大家應該都還記得要寫動態相關的程式要在 Activity 下才可以吧),將 myTextView 加上一個點擊的 listener:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        myTextView.setOnClickListener {
            myTextView.text = "You Click"
        }
    }
}

setOnClickListener 接收的參數是一個 OnClickListener,function 如下:

public void setOnClickListener(View.OnClickListener l)

眼尖的大家可能會發現我們使用這個 function 的方式跟一般 function 不太一樣,這是因為 kotlin 允許我們使用 lambda 來簡化 function 的呼叫,有興趣的朋友可以在這裡看到 lambda 介紹,https://kotlinlang.org/docs/reference/lambdas.html

如果一開始不熟練也可以用一般的寫法,Android Studio 會標示 ~~~~ 底線在你的程式碼上代表你可以做某些優化,按下 ⌥ + ↩ 就會自動改成漂亮的寫法囉。

OnClickListener 的全貌如下:

public interface OnClickListener {
    void onClick(View view);
}

我們可以想成我們透過這個 interface 跟 myTextView 註冊了 onClick 的事件,當它被點擊的時候 myTextView 就會呼叫我們的 onClick() function 並把自己當成參數告訴我們是誰被點擊了。然後在 onClick() 這個 function 裡就可以做任何我們想做的事情了。

Listeners and listeners

想當然 Android 不只有提供一個 OnClickListener,還有諸如 OnTouchListenerOnFocusChangeListener 以及每個不同的 View 也可能會有特別的 listener 可以使用,例如 CheckBox 就會有 OnCheckedChangeListener 等。大家可以多翻 Android 的官方文件或是利用 Android Studio 的自動完成來探索更多其他可以使用的 listener。

One more thing...

我們的範例還有一個小地方可以優化,當我們把 app 執行在手機上時,myTextView 看起來實在不像一個可以點的東西。解決方法也很簡單,我們可以回到 activity_main.xmlTextView 換成 Button 重新執行就會看到一個比較好看的樣式了。

套句 Steve Jobs 的名言:

We made the buttons on the screen look so good you'll want to lick them.

身為 App developer 在 UI/UX 上有點小偏執狂會是一個不錯的加分喔,我們明天見!

Android 十全大補已經正式出書上架囉!
有興趣的讀者歡迎參考:
https://www.tenlong.com.tw/products/9789864345786


上一篇
[Android 十全大補] Activity
下一篇
[Android 十全大補] Activities
系列文
Android 十全大補30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言